<template>
  <el-dialog
      v-model="dialogVisible"
      title="提示"
      width="400px"
      :before-close="handleClose"
      custom-class="custom-logout-dialog"
      center
  >
    <div class="dialog-content">
      <el-icon class="warning-icon" color="#E6A23C"><Warning /></el-icon>
      <p class="dialog-message">确定要退出登录吗？</p>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmLogout">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { Warning } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user'; // 添加这行导入

const router = useRouter();
const userStore = useUserStore(); // 添加这行初始化
const dialogVisible = ref(false);

// 打开对话框
const openLogoutDialog = () => {
  dialogVisible.value = true;
};

// 确认退出登录
const confirmLogout = () => {
  userStore.clearUserInfo(); // 现在可以正确访问 userStore
  router.push('/login');
  dialogVisible.value = false;
};

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
};

// 暴露方法给父组件
defineExpose({
  openLogoutDialog
});
</script>

<style scoped>
.dialog-content {
  text-align: center;
  padding: 20px 0;
}

.warning-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.dialog-message {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  padding: 10px 20px 20px;
}

.dialog-footer .el-button {
  min-width: 100px;
  margin: 0 10px;
}
</style>

<style>
/* 全局样式 */
.custom-logout-dialog {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.custom-logout-dialog .el-dialog__header {
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
  margin: 0;
}

.custom-logout-dialog .el-dialog__title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.custom-logout-dialog .el-dialog__body {
  padding: 20px;
}
</style>
